<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
	<meta charset="utf-8" />
	<title>$GODOT_HEAD_TITLE</title>
	$GODOT_HEAD_INCLUDE
	<style type="text/css">
		body {
			margin: 0;
			border: 0 none;
			padding: 0;
			text-align: center;
			background-color: black;
			font-family: $GODOT_STYLE_FONT_FAMILY;
		}


		/* Godot Engine default theme style
		 * ================================ */

		.godot {
			color: #e0e0e0;
			background-color: #3b3943;
			background-image: linear-gradient(to bottom, #403e48, #35333c);
			border: 1px solid #45434e;
			box-shadow: 0 0 1px 1px #2f2d35;
		}

		button.godot {
			font-family: $GODOT_STYLE_FONT_FAMILY; /* override user agent style */
			padding: 1px 5px;
			background-color: #37353f;
			background-image: linear-gradient(to bottom, #413e49, #3a3842);
			border: 1px solid #514f5d;
			border-radius: 1px;
			box-shadow: 0 0 1px 1px #2a2930;
		}

		button.godot:hover {
			color: #f0f0f0;
			background-color: #44414e;
			background-image: linear-gradient(to bottom, #494652, #423f4c);
			border: 1px solid #5a5667;
			box-shadow: 0 0 1px 1px #26252b;
		}

		button.godot:active {
			color: #fff;
			background-color: #3e3b46;
			background-image: linear-gradient(to bottom, #36343d, #413e49);
			border: 1px solid #4f4c59;
			box-shadow: 0 0 1px 1px #26252b;
		}

		button.godot:disabled {
			color: rgba(230, 230, 230, 0.2);
			background-color: #3d3d3d;
			background-image: linear-gradient(to bottom, #434343, #393939);
			border: 1px solid #474747;
			box-shadow: 0 0 1px 1px #2d2b33;
		}


		/* Canvas / wrapper
		 * ================ */

		#container {
			display: inline-block; /* scale with canvas */
			vertical-align: top; /* prevent extra height */
			position: relative; /* root for absolutely positioned overlay */
			margin: 0;
			border: 0 none;
			padding: 0;
			background-color: #111;
		}

		#canvas {
			display: block;
			margin: 0 auto;
			/* canvas must have border and padding set to zero to
			 * calculate cursor coordinates correctly */
			border: 0 none;
			padding: 0;
		}


		/* Status display
		 * ============== */

		#status-container {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			/* don't consume click events - make children visible explicitly */
			visibility: hidden;
		}

		#status {
			visibility: visible;
			padding: 4px 6px;
		}


		/* On-hover controls
		 * ================= */

		#controls {
			visibility: hidden;
			opacity: 0.0;
			transition: opacity 500ms ease-in-out 200ms;
			position: absolute;
			right: 16px;
			top: 16px;
			padding: 3px 5px;
			font-size: small;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
		}

		#container:hover > #controls {
			opacity: 1.0;
			transition: opacity 60ms ease-in-out;
		}

		#controls > button,
		#controls > label {
			vertical-align: middle;
			margin-left: 2px;
			margin-right: 2px;
		}

		#controls > label > input[type="checkbox"] {
			/* override user agent style */
			margin-left: 0;
		}

		label > input {
			vertical-align: middle;
		}

		#display-output { display: none; }


		/* Debug output
		 * ============ */

		#output {
			display: none;
			margin: 6px auto;
			border: 2px groove grey;
			padding: 4px;
			outline: none;
			text-align: left;
			white-space: pre-wrap;
			font-size: small;
			color: #eee;
			background-color: black;
			font-family: "Lucida Console", Monaco, monospace;
		}


		/* Export style include
		 * ==================== */

		$GODOT_STYLE_INCLUDE
	</style>
</head>
<body>
	<div id="container">
		<canvas id="canvas" width="$GODOT_CANVAS_WIDTH" height="$GODOT_CANVAS_HEIGHT" onclick="canvas.ownerDocument.defaultView.focus();" oncontextmenu="event.preventDefault();">
			HTML5 canvas appears to be unsupported in the current browser.<br />Please try updating or use a different browser.
		</canvas>
		<div id="status-container">
			<span id="status" class="godot" onclick="this.style.visibility='hidden';">Loading page...</span>
		</div>
		<div id="controls" class="godot">
			<label id="display-output"><input id="output-toggle" type="checkbox" autocomplete="off" onchange="Presentation.setOutputVisible(this.checked);" />display output</label>
			<!-- hidden until implemented
			<label><input id="lock-cursor" type="checkbox" autocomplete="off" />lock cursor</label>
			<label><input id="resize-canvas" type="checkbox" autocomplete="off" />resize canvas</label>
			-->
			<button id="fullscreen" class="godot" type="button" disabled="disabled" autocomplete="off" onclick="Presentation.goFullscreen();">fullscreen</button>
		</div>
	</div>
	<!-- Firefox adds extra space to textarea, but shouldn't matter too much https://bugzilla.mozilla.org/show_bug.cgi?id=33654 -->
	<textarea id="output" rows="10" cols="100" readonly="readonly" style="resize:none"></textarea>

	<script type="text/javascript">//<![CDATA[
		var Presentation = (function() {
			var statusElement = document.getElementById("status");
			var outputElement = document.getElementById("output");
			var doneLoading = false;

			function onLoaded() {
				doneLoading = true;
				var fullscreenButtonElement = document.getElementById("fullscreen");
				fullscreenButtonElement.disabled = false;
			}

			var presentation = {
				statusElement: statusElement,
				outputElement: outputElement,
				setOutputVisible: function setOutputVisible(visible) {
					outputElement.style.display = (visible?"block":"none");
				},
				setStatusVisible: function setStatusVisible(visible) {
					statusElement.style.visibility = (visible?"visible":"hidden");
				},
				setStatus: function setStatus(text) {
					if (!text || text.length === 0) {
						Presentation.setStatusVisible(false);
						onLoaded();
					} else {
						Presentation.setStatusVisible(true);
						statusElement.innerHTML = text;
					}
				},
				goFullscreen: function goFullscreen() {
					if (doneLoading) Module.requestFullScreen(false, false);
				}
			};

			if ($GODOT_CONTROLS_ENABLED) { // controls enabled
				(function() {
					var controlsElement = document.getElementById("controls");
					controlsElement.style.visibility="visible";
				})();
			}

			if ($GODOT_DEBUG_ENABLED) { // debugging enabled
				(function() {
					var outputToggleLabel = document.getElementById("display-output");
					var outputToggle = document.getElementById("output-toggle");

					outputElement.value = ""; // clear browser cache
					outputElement.style.display = "block";
					outputToggle.checked = true;
					outputToggleLabel.style.display = "inline";

					presentation.print = function print(text) {
						if (outputElement.value.length !== 0)
							outputElement.value += "\n";
						outputElement.value += text;
						outputElement.scrollTop = outputElement.scrollHeight; // focus on bottom
					};
				})();
			}

			return presentation;
		})();

		// Emscripten interface
		var Module = (function() {
			var print = (function() {
				if (typeof Presentation.print === "function") {
					return function print(text) {
						if (arguments.length > 1)
							text = Array.prototype.slice.call(arguments).join(" ");
						console.log(text);
						Presentation.print(text);
					};
				} else {
					return function print(text) {
						if (arguments.length > 1)
							text = Array.prototype.slice.call(arguments).join(" ");
						console.log(text);
					};
				}
			})();

			var canvas = (function() {
				var canvasElement = document.getElementById("canvas");

				// As a default initial behavior, pop up an alert when WebGL context is lost. To make your
				// application robust, you may want to override this behavior before shipping!
				// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
				canvasElement.addEventListener("webglcontextlost", function(e) { alert("WebGL context lost. Plase reload the page."); e.preventDefault(); }, false);

				return canvasElement;
			})();

			var setStatus = (function() {
				if (typeof Presentation.setStatus === "function")
					return function setStatus(text) {
						if (!Module.setStatus.last)
							Module.setStatus.last = { time: Date.now(), text: "" };
						if (text === Module.setStatus.text)
							return;
						var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
						var now = Date.now();
						if (m) {
							if (now - Date.now() < 30) // if this is a progress update, skip it if too soon
								return;
							text = m[1];
						}
						Presentation.setStatus(text);
					};
				else
					return function setStatus(text) {
						if (!Module.setStatus.last)
							Module.setStatus.last = { time: Date.now(), text: "" };
						if (text === Module.setStatus.text)
							return;
						var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
						var now = Date.now();
						if (m) {
							if (now - Date.now() < 30) // if this is a progress update, skip it if too soon
								return;
							text = m[1];
						}
					};
			})();

			return {
				TOTAL_MEMORY: 268435456,
				preRun: [],
				postRun: [],
				print: print,
				printErr: function printErr(text) {
					if (arguments.length > 1)
						text = Array.prototype.slice.call(arguments).join(" ");
					if (0) { // XXX disabled for safety `if (typeof dump == "function")`
						dump(text + "\n"); // fast, straight to the real console
					} else {
						console.error(text);
					}
				},
				canvas: canvas,
				setStatus: setStatus,
				totalDependencies: 0,
				monitorRunDependencies: function monitorRunDependencies(left) {
					this.totalDependencies = Math.max(this.totalDependencies, left);
					Module.setStatus(left ? "Preparing... (" + (this.totalDependencies-left) + "/" + this.totalDependencies + ")" : "All downloads complete.");
				}
			};
		})();

		Presentation.setStatus("Downloading...");

		window.onerror = function(event) {
			// TODO: do not warn on ok events like simulating an infinite loop or exitStatus
			Module.setStatus("Exception thrown, see JavaScript console");
			Module.setStatus = function(text) {
				if (text) Module.printErr("[post-exception status] " + text);
			};
		};
	//]]></script>
	<script type="text/javascript" src="$GODOT_FS"></script>
	<script>
		(function() {
			var memoryInitializer = "$GODOT_MEM";
			if (typeof Module.locateFile === "function") {
				memoryInitializer = Module.locateFile(memoryInitializer);
			} else if (Module.memoryInitializerPrefixURL) {
				memoryInitializer = Module.memoryInitializerPrefixURL + memoryInitializer;
			}
			var xhr = Module.memoryInitializerRequest = new XMLHttpRequest();
			xhr.open("GET", memoryInitializer, true);
			xhr.responseType = "arraybuffer";
			xhr.send(null);
		})();

		var script = document.createElement("script");
		script.src = "$GODOT_JS";
		document.body.appendChild(script);
	</script>
</body>
</html>
